<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-white']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false" :back="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:88rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">我的订单</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>

		<template v-slot:gBody>
			<view class="gui-relative">
				<view class="gui-fixed-lt gui-bg-white gui-dark-bg-level-3 gui-padding" style="box-sizing: border-box;background-color: white;top:150rpx;">
					<gui-switch-navigation textAlign="center" :activeLineWidth="'96rpx'" :isCenter="true" :size="128"
						activeDirection="center"
						:activeLineClass="['gui-nav-scale','hulu-primary-bg-color1', 'gui-gtbg-black']"
						:titleActiveClass="['hulu-primary-color1','hulu-font-1']"
						:titleClass="['hulu-text-color2','hulu-font-3']" :items="navItems" :currentIndex="currentIndex"
						@change="navchange"></gui-switch-navigation>
				</view>
				<view class="" style="height:120rpx;">

				</view>
				<view class="hulu-main">
					<swiper :style="{height:`${mainHeight}rpx`}" :current="currentIndex" @change="swiperChange">
						<!-- 轮播项目数量对应 上面的选项标签 -->
						<swiper-item>
							<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true">
								<hulu-ticket-card :repairs="repairs" class="hulu_c1" ref="huluRef1"></hulu-ticket-card>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true">
								<hulu-ticket-card :repairs="repairs" class="hulu_c2" ref="huluRef2"></hulu-ticket-card>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true">
								<hulu-ticket-card :repairs="repairs" class="hulu_c3" ref="huluRef3"></hulu-ticket-card>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import useRepair from "@/api/repair"
	import graceJS from '@/Grace6/js/grace.js';
	const {
		getRepair
	} = useRepair()
	export default {
		data() {
			return {
				mainHeight: 633,
				currentIndex: 0,

				navItems: [{
						name: "正常工单",
					},
					{
						name: "应急工单",
					},
					{
						name: "全部",
					},
				],
				repairs: []
			}
		},
		onShow() {
		this.getData()	
		},
		onLoad() {

			uni.getSystemInfo({
				success: (res) => {
					console.log('屏幕高度：' + res.windowHeight);
					// 在这里可以使用 res.windowHeight 做其他操作
					// 64rpx
					// 已知的固定高度
					const topNavBarHeight = 44; // 顶部导航栏高度，单位 px
					const switchNavHeight = 64; // 切换导航高度，单位 px
					const bottomNavBarHeight = 50; // 底部导航高度，单位 px
					// 计算调整后的高度
					const adjustedHeightPx = res.windowHeight - topNavBarHeight - switchNavHeight -
						bottomNavBarHeight;
					this.mainHeight = adjustedHeightPx * 2;

					console.log('调整后的高度：' + this.mainHeight + 'px');
				},
				fail: function(err) {
					console.error('获取系统信息失败：', err);
				}
			});
		},
		methods: {
			async getData() {
				this.repairs = await getRepair(this.currentIndex + 1)
				let length = this.repairs.length
				if(length==0||185*2*length<this.mainHeight)return ;
				this.mainHeight=185*2*length+80
			},
			navchange: function(index) {
				this.currentIndex = index;
				this.getData();
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current
				this.getData();
				// uni.createSelectorQuery().in(this).select('.hulu_c1').boundingClientRect((rect) => {
				// 	if (!rect) return;
				// 	const scrollViewHeight = rect.height;
				// 	console.log(scrollViewHeight,"===高度")
				// 	this.mainHeight = scrollViewHeight + 100; // 假设每行内容高度为20px，可根据实际情况调整
				// }).exec();
			}
		},
	}
</script>
<style lang="scss">
	.hulu-line-gradient {
		background-image: linear-gradient(135deg, #A57B3F, #fce38a) !important;
	}

	.hulu-main {
		padding: 0 24rpx;
		box-sizing: border-box;
	}
</style>